<template>
  <el-dialog
    v-model="visible"
    :title="parameter.title"
    width="700"
    draggable
    @close="close"
    :z-index="2000"
  >
    <div class="font-bold mb-4">第 1 步：点击下载模版</div>
    <div class="h-11 w-full flex items-center justify-center down-style mb-4">
      <svg-icon icon-class="download" class="mr-1" />
      <el-button text type="primary" @click="downloadTemp">下载模版</el-button>
    </div>
    <div class="font-bold mb-4">第 2 步：按照模版要求填写</div>
    <div class="font-bold mb-4">第 3 步：上传填写完成的文件</div>
    <div class="h-11 w-full flex items-center justify-center down-style mb-4">
      <svg-icon icon-class="add (2)" class="mr-1" />
      <el-upload
        class="upload-demo flex items-center justify-center relative"
        action="#"
        ref="uploadRef"
        :limit="excelLimit"
        :multiple="true"
        :show-file-list="true"
        :auto-upload="false"
        :on-change="changeFile"
        :accept="parameter.fileType.join(',')"
      >
        <el-button text type="primary">上传文件</el-button>
      </el-upload>
    </div>
    <slot name="footer"></slot>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submitUpload()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup name="ImportExcel">
import { downloadFile } from "@/utils/downloadFile.js";
import { reactive, toRefs } from "vue";
import { ElNotification, ElMessage } from "element-plus";
const data = reactive({
  uploadRef: null,
  visible: false,
  loading: false,
  excelLimit: 1, // 最大文件上传数
  binary: null,
  parameter: {
    title: "",
    fileSize: 100,
    fileType: [
      "application/vnd.ms-excel",
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    ],
  },
});
const { visible, loading, excelLimit, parameter, uploadRef, binary } = toRefs(data);
// 接收父组件参数
const acceptParams = (params) => {
  parameter.value = { ...parameter.value, ...params };
  visible.value = true;
};

// Excel 导入模板下载
const downloadTemp = () => {
  if (!parameter.value.tempApi) return;
  downloadFile(parameter.value.tempApi, `${parameter.value.title}模板`);
};
/**
 * @description 选择文件
 * @param file 上传的文件
 * */
const changeFile = (file) => {
  const isExcel = parameter.value.fileType.includes(file.raw.type);
  const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize;
  if (!isExcel) {
    ElNotification({
      title: "温馨提示",
      message: "上传文件只能是 xls / xlsx 格式！",
      type: "warning",
    });
    removeFile();
    return;
  }
  if (!fileSize) {
    ElNotification({
      title: "温馨提示",
      message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
      type: "warning",
    });
    removeFile();
    return;
  }
  binary.value = file.raw;
};
// 清空选择
const removeFile = () => {
  nextTick(() => {
    if (uploadRef.value) {
      uploadRef.value.clearFiles();
    }
  });
};

const submitUpload = async () => {
  loading.value = true;
  let excelFormData = new FormData();
  excelFormData.append("file", binary.value);
  try {
    const res = await parameter.value.importApi(excelFormData);
    if (res && res.code === 200) {
      ElNotification({
        title: "温馨提示",
        message: res.message,
        type: "success",
      });
      binary.value = null;
      close();
    } else {
      ElMessage.error(res.message);
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
  }
};
const close = () => {
  visible.value = false;
  binary.value = null;
  removeFile();
};
defineExpose({
  acceptParams,
});
</script>
<style scoped lang="scss">
.el-icon--upload svg {
  font-size: 67px;
}

:deep(.el-upload-list) {
  width: 200px;
  position: absolute;
  top: 40px;
  display: flex;
  justify-content: center;

  .el-upload-list__item {
    width: 100%;
  }
}

.down-style {
  background: #fafafa;
  border-radius: 4px;
}
</style>
